<template>
  <div>
    <div class="b-p-f">
      <div class="btnStyle flex-between m-b">
        <el-button type="primary" size="small" @click="addMenu()"
          >新建菜单</el-button
        >
      </div>
      <TableComp
        class="m-t"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :tableAction="tableAction"
        :treeConfig="{
          defaultExpandAll: true,
          treeProps: { children: 'childList' },
        }"
        :isSelect="false"
        :rowKey="`id`"
      >
        <template v-slot:type="scope">
          <div class="table-slot">
            <el-tag size="mini" type="success" v-if="scope.row.type == '0'">
              菜单
            </el-tag>
            <el-tag size="mini" type="warning" v-if="scope.row.type == '1'">
              按钮
            </el-tag>
          </div>
        </template>
        <template v-slot:icon="scope">
          <div class="table-slot">
            <span v-if="scope.row.icon" :class="scope.row.icon"></span>
            <span v-else>---</span>
          </div>
        </template>
      </TableComp>
    </div>
    <MenuDialog ref="menuDialog" @closeDialog="closeDialog()" />
  </div>
</template>

<script>
import MenuDialog from "./menuDialog.vue";
export default {
  components: {
    MenuDialog,
  },
  data() {
    return {
      loading: false,
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [],
      tableConfig: [
        {
          prop: "orderNum",
          label: "排序",
          align: "left",
          width: "80px",
        },
        {
          prop: "name",
          label: "名称",
        },
        {
          prop: "icon",
          label: "图标",
          isSlot: true,
        },
        {
          prop: "type",
          label: "类型",
          isSlot: true,
        },
        {
          prop: "url",
          label: "路由/标识",
          showHint: (row) => {
            return {
              name: row.url,
            };
          },
        },
      ],
      tableAction: {
        align: () => "center",
        width: () => String(150),
        operations: [
          {
            label: "修改",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "编辑菜单",
                isEdit: true,
                data: row,
              };
              this.$refs.menuDialog.show(obj);
            },
          },
          {
            label: "新增",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "新增菜单",
                data: {
                  parentId: row.id,
                  code: "",
                  orderNum: "",
                  redirect: "",
                  icon: "",
                  type: "0",
                },
              };
              this.$refs.menuDialog.show(obj);
            },
          },
          {
            label: "删除",
            isLink: true,
            type: "danger",
            method: (row) => {
              this.del(row);
            },
          },
        ],
      },
      queryString: {
        name: "",
        roleId: "",
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    addMenu() {
      let obj = {
        title: "新建菜单",
        data: {
          parentId: 0,
          code: "",
          orderNum: "",
          redirect: "",
          icon: "",
          type: "0",
        },
      };
      this.$refs.menuDialog.show(obj);
    },
    closeDialog() {
      this.initData();
    },
    initData() {
      this.$axios.get(this.$api.setting.menuApi.getAllMenu).then((res) => {
        const { data, code } = res.data;
        if (code == 200) {
          this.tableData = data || [];
        }
      });
    },
    del(row) {
      this.$confirm(`确定要删除当前菜单吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const formData = new FormData();
          formData.append("idList", [row.id]);
          this.$axios
            .post(this.$api.setting.menuApi.deleteFun, formData)
            .then(() => {
              this.initData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  background-color: #fff;
  height: 80vh;
}
</style>
